<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">textview文本组件</view>
		</view>
		<view class="smart-padding-wrap">
			<text space="ensp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<text space="emsp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<text space="nbsp" class="text-space">A&nbsp;&emsp;B C \n</text>
			<view class="text-box">
				<text selectable="true">{{text}}</text>
			</view>
			<button type="primary" :disabled="!canAdd" @click="addLine">Add Line
			</button>
			<button type="warn" :disabled="!canRemove" @click="removeLine">Remove Line
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: 'HBuilder，500万开发者选择的IDE\nMUI，轻巧、漂亮的前端开源框架\nwap2App，M站快速转换原生体验的App\n5+Runtime，为HTML5插上原生的翅膀',
				canAdd: true,
				canRemove: false
			};
		},
		methods: {
			addLine() {
				this.text += '\n新增一行内容';
				this.canRemove = true;
				if (this.text.split('\n').length >= 8) {
					this.canAdd = false;
				}
			},
			removeLine() {
				const lines = this.text.split('\n');
				lines.pop();
				this.text = lines.join('\n');
				this.canAdd = true;
				if (lines.length <= 4) {
					this.canRemove = false;
				}
			}
		},
		created() {
			this.canRemove = this.text.split('\n').length > 4;
		}
	};
</script>

<style>
.smart-page-head {
	margin-bottom: 15px;
}
.head-title {
	color: #7E57C2;
	font-size: 18px;
	font-weight: bold;
	padding: 15px;
	text-align: center;
}
.text-space-wrap {
	padding: 15px;
}
.text-line {
	display: inline-block;
	background-color: #B39DDB;
	color: #000;
	padding: 8px;
	margin-bottom: 5px;
}
.selectable-text {
	background-color: #F5F5F5;
	padding: 15px;
	margin: 0 15px 15px;
	border-radius: 4px;
}
.button-wrap {
	padding: 0 15px;
}	
.add-btn {
	background-color: #42A5F5;
	color: #fff;
	margin-bottom: 10px;
}
.remove-btn {
	background-color: #F44336;
	color: #fff;
}
</style>